<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <title>jQuery Pagination - jPaginate</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <meta name="description" content="jPaginate - jQuery Pagination Plugin" />
        <meta name="keywords" content="jquery, plugin, pagination, fancy" />
        <link rel="stylesheet" type="text/css" href="css/style.css" media="screen"/>
        <link rel="stylesheet" type="text/css" href="css/estilo.css" media="screen"/>
    </head>
    <body>
        <div class="header">
            <h1>jPaginate</h1>
        </div>
        <div class="content">
            <div class="demo">
                <h1>Demo 1</h1>
                <div id="demo1">                   
                </div>
            </div>
			<div class="demo">
                <h1>Demo 2</h1>
                <div id="demo2">                   
                </div>
            </div>
			<div class="demo">
                <h1>Demo 3</h1>
                <div id="demo3">                   
                </div>
            </div>
			<div class="demo">
                <h1>Demo 4</h1>
                <div id="demo4">                   
                </div>
            </div>
			<div id="paginationdemo" class="demo">
                <h1>Demo 5</h1>
                <div id="p1" class="pagedemo _current" style="">Page 1</div>
                <div id="p2" class="pagedemo" style="display:none;">Page 2</div>
                <div id="p3" class="pagedemo" style="display:none;">Page 3</div>
                <div id="p4" class="pagedemo" style="display:none;">Page 4</div>
                <div id="p5" class="pagedemo" style="display:none;">Page 5</div>
                <div id="p6" class="pagedemo" style="display:none;">Page 6</div>
                <div id="p7" class="pagedemo" style="display:none;">Page 7</div>
                <div id="p8" class="pagedemo" style="display:none;">Page 8</div>
                <div id="p9" class="pagedemo" style="display:none;">Page 9</div>
                <div id="p10" class="pagedemo" style="display:none;">Page 10</div>
                <div id="demo5"></div>
            </div>
        </div>
            <div class="about">
                <div class="text">
                    <h1>Demo 1</h1>
                    <p>Hover over the arrows to make the pages move or keep the mouse button down in order to move a whole set.</p>   
					<p>Clicking a page number will make it move to the center</p>	
                </div>
                <div class="text">
                    <h1>Demo 2</h1>
                    <p>Demo 2 shows how the plugin can be used with arrow images.</p>                   
                </div>
                <div class="text">
                    <h1>Demo 3</h1>
                    <p>This is an example without any arrows. The user just sees the current page and the surrounding pages.</p>                    
                </div>
                <div class="text">
                    <h1>Demo 4</h1>
                    <p>Demo 4 shows how the plugin can be configured in style (no borders for the page numbers).</p>                    
                </div>
				<div class="text">
                    <h1>Demo 5</h1>
                    <p>This one shows how to integrate the plugin with an onChange event.</p>                    
                </div>
            </div>
        </div>
        <div class="footer"><a href="http://www.tympanus.net/codrops/"><img src="codrops_back.png" alt="Back to Codrops"/></a></div> 
                <script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
		<script src="js/jquery.paginate.js" type="text/javascript"></script>
		<script type="text/javascript">
		$(function() {
			$("#demo1").paginate({
				count 		: 100,
				start 		: 1,
				display     : 8,
				border					: true,
				border_color			: '#fff',
				text_color  			: '#fff',
				background_color    	: 'black',	
				border_hover_color		: '#ccc',
				text_hover_color  		: '#000',
				background_hover_color	: '#fff', 
				images					: false,
				mouse					: 'press'
			});
			$("#demo2").paginate({
				count 		: 50,
				start 		: 5,
				display     : 10,
				border					: false,
				text_color  			: '#888',
				background_color    	: '#EEE',	
				text_hover_color  		: 'black',
				background_hover_color	: '#CFCFCF'
			});
			$("#demo3").paginate({
				count 		: 50,
				start 		: 20,
				display     : 12,
				border					: true,
				border_color			: '#BEF8B8',
				text_color  			: '#68BA64',
				background_color    	: '#E3F2E1',	
				border_hover_color		: '#68BA64',
				text_hover_color  		: 'black',
				background_hover_color	: '#CAE6C6', 
				rotate      : false,
				images		: false,
				mouse		: 'press'
			});
			$("#demo4").paginate({
				count 		: 50,
				start 		: 20,
				display     : 12,
				border					: false,
				text_color  			: '#79B5E3',
				background_color    	: 'none',	
				text_hover_color  		: '#2573AF',
				background_hover_color	: 'none', 
				images		: false,
				mouse		: 'press'
			});
			$("#demo5").paginate({
                            count                  : 10,
                            start                  : 1,
                            display                : 7,
                            border                 : true,
                            border_color	   : '#fff',
                            text_color  	   : '#fff',
                            background_color   	   : 'black',	
                            border_hover_color	   : '#ccc',
                            text_hover_color  	   : '#000',
                            background_hover_color : '#fff', 
                            images		   : false,
                            mouse		   : 'press',
                            onChange     	   : function(page){
                                                         $('._current','#paginationdemo').removeClass('_current').hide();
                                                         $('#p'+page).addClass('_current').show();
                                                     }
			});
		});
		</script>
	</body>
</html>

